<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm">
            <el-form-item label="用户名称" prop="userName">
                <el-input v-model="ruleForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="用户账号" prop="account">
                <el-input v-model="ruleForm.account" disabled></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
                <el-radio v-model="ruleForm.sex" label="0">女</el-radio>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="操作" prop="password">
                <el-link type="primary" @click="updatePasswd">更改密码</el-link>
            </el-form-item>
            <el-form-item label="密码备忘录1" prop="memorandum">
                <el-input v-model="ruleForm.memorandum"></el-input>
            </el-form-item>
            <el-form-item label="密码备忘录2" prop="memorandum1">
                <el-input v-model="ruleForm.memorandum1"></el-input>
            </el-form-item>
            <el-form-item label="选择头像" >
                <el-upload
                        ref="upload"
                        :limit="1"
                        list-type="picture-card"
                        :auto-upload="false"
                        :on-preview="handlePictureCardPreview"
                        action="#"
                        :on-exceed="handleExceed"
                        :http-request="uploadFile"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog >
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
        </el-form>
        <el-dialog
                :visible.sync="dialogVisible"
                :modal="false"
                width="30%"
                >
            <el-input v-model="ruleForm.password" show-password>></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
    import {getUserInfo,upUserInfo}from '@/api/userAPI'
    export default {
        data() {
            return {
                ruleForm: {
                    userName: '',
                    account: '',
                    phone:'',
                    memorandum: '',
                    memorandum1: '',
                    password:'',
                    sex:'1',

                },
                dialogImageUrl:'',
                formDate:'',
                dialogVisible: false,
                rules: {
                    userName: [
                        { required: true, message: '用户名称不可为空', trigger: 'blur' },
                    ],
                    phone: [
                        { required: true, message: '用户手机号不可为空', trigger: 'blur' },
                    ],
                    account: [
                        { required: true, message: '用户账号不可为空', trigger: 'blur' }
                    ],
                    memorandum: [
                        { required: true, message: '密码备忘录1不可为空', trigger: 'blur' }
                    ],
                }
            };
        },
        methods: {
            updatePasswd(){
                this.dialogVisible=!this.dialogVisible
            },
            handleExceed(){
                this.$message.warning("头像只能选择一个")
            },
            uploadFile(file){
                this.formDate.append('file', file.file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
            },
            //提交
            submit () {
                return new Promise((resolve, reject) => {
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            this.formDate = new FormData()
                            this.$refs.upload.submit();
                            //表单数据追加到formDate中
                            this.formDate.append("paramMap",JSON.stringify(this.ruleForm))
                            upUserInfo(this.formDate).then(res => {
                                getUserInfo().then(ress=>{
                                    localStorage.setItem("userInfo",JSON.stringify(ress.data.data))
                                    this.$bus.$emit('changeInfo',ress.data.data)
                                }).catch(e => {
                                    this.$message.error({
                                        message: '抱歉，读取用户信息遇到异常，请重试或联系管理员处理'
                                    })
                                })
                                resolve(res.data)
                            }).catch(e => {
                                reject(e)
                                this.$message.error({
                                    message: '抱歉，操作遇到异常，请重试或联系管理员处理'
                                })
                            })
                        } else {
                            this.$message.error('业务校验未通过')
                            reject(new Error('业务校验失败'))
                        }
                    })
                })
            }
        },
        mounted() {
            getUserInfo().then(res=>{
                this.ruleForm.userName=res.data.data.username
                this.ruleForm.account=res.data.data.account
                this.ruleForm.phone=res.data.data.phone
                this.ruleForm.memorandum=res.data.data.memorandum
                this.ruleForm.memorandum1=res.data.data.memorandum1
                this.ruleForm.sex=res.data.data.sex
            }).catch(e => {
                console.log(e,111111)
                this.$message.error({
                    message: '抱歉，读取用户信息遇到异常，请重试或联系管理员处理'
                })
            })
        }
    }
</script>

<style scoped>

</style>
